<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <!--<link rel="stylesheet" href="assets/common.css"/>-->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/layui/layui.all.js"></script>
    <script src="/plugins/jquery/jquery.min.js?v=1.12.4"></script>
    <script src="/plugins/ztree/js/jquery.ztree.all.min.js?v=1.12.4"></script>
    <script src="/common/js/common.js"></script>
    <script src="/common/js/page.js?v=3.5.29"></script>
</head>
<body>
<include src="/common/container.html"></include>

<div class="layui-container layui-text" style="width: 100%;">
    <br>
    <!-- -->
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn" id="btn-fold">全部折叠</button>
        <button class="layui-btn" id="btn-refresh">刷新表格</button>
    </div>
    <!-- <a class="layui-btn layui-btn-primary" href="https://whvse.gitee.io/treetable/" target="_blank">BOM树形表格</a>-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <table id="table-list" class="layui-table" lay-filter="table-bar"></table>
</div>
<!-- 头部工具栏模板： -->
<script type="text/html" id="head-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<!-- 行工具栏模板, table 中操作按钮 -->
<script type="text/html" id="oper-col">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.config({
        base: '/plugins/layui/'
    }).extend({
        treetable: '/treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery
            , table = layui.table
            , layer = layui.layer
            , treetable = layui.treetable
            , renderTable = null
            , form = layui.form;//表单
        window.dataReload = function () {
            Page.initSearchForm($("#btn-refresh"), null, renderTable, form)
        };
        // 渲染表格
        renderTable = function () {
            //layer.load(2);
            treetable.render({
                treeColIndex: 1, //树形图标显示在第几列
                treeSpid: 0,    //最上级的父级id
                treeIdName: 'id',
                treePidName: 'parentId',
                treeDefaultClose: false, //初始化是否关闭树
                treeLinkage: false,  //父级展开时是否自动展开所有子级
                elem: '#table-list',
                url: '/depart/list.json',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', title: 'name'},
                    {field: 'id', title: 'id'},
                    {field: 'code', title: 'code'},
                    {field: 'sort', title: 'sort'},
                    {templet: '#oper-col', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };
        renderTable();
        //张开
        $('#btn-expand').click(function () {
            treetable.expandAll('#table-list');
        });
        //收缩
        $('#btn-fold').click(function () {
            treetable.foldAll('#table-list');
        });
        //刷新
        $('#btn-refresh').click(function () {
            renderTable();
        });
        //监听工具条
        table.on('tool(table-bar)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'add') {
                var url = "/depart/add.html?parentId=" + data.id;
                Common.topOpenDlg(url, "菜单管理>新增", '800px', '700px');
            } else if (layEvent === 'edit') {
                var url = "/depart/edit.html?id=" + data.id;
                Common.topOpenDlg(url, "菜单管理>编辑", '460px', '400px');
            } else if (layEvent === 'del') {
                Common.deleteData("/depart/delete.json", {id: data.id}, '/depart/index.html');
            }
        });
    });
</script>
</body>
</html>